<div class="formDesigner f-page f-page-navigate" cdkDropListGroup>
  <farris-splitter class="d-flex f-page-content f-component-splitter">
    <farris-splitter-pane class="px-0 f-component-splitter-pane border-top f-page-content-nav bg-white"
      style="width:200px;" [rzMinWidth]="200" ngResizable [rzHandles]="'e'">

      <div class="vm-list">
        <ul class="f-list-view-group">
          <div *ngFor="let item of cmpList;" [class.f-listview-active]="activeCmpId===item.componentId"
            (click)="onChangeSelectedCmp(item.componentId)">
            <div class="f-list-content">
              <div class="f-template-listnav-row">
                <div class="list-nav-link" [class.active]="activeCmpId===item.componentId">
                  <span class="nav-item-name" [title]="item.componentId"> {{item.name}} </span>
                </div>
              </div>
            </div>
          </div>
        </ul>
      </div>

    </farris-splitter-pane>

    <div class="f-page-content-main f-component-splitter-pane h-100 f-utils-overflow-hidden position-relative">
      <angular-monaco-editor class="customMonacoEditor" [options]="classEditorOptions" [(ngModel)]="classCode"
        (onInit)="onMonacoInit($event)"></angular-monaco-editor>
    </div>
  </farris-splitter>
</div>